<template>
	<view class="shiTingQuan">
		<div class="box1 bfff" v-for="(v,i) in list" :key="v.code">
			<div class="center">
				<image :src="v.goodsImg" mode="aspectFill" class="player-icon mr25"></image>
				<div class="right flex1">
					<div class="f34 fbold text1">{{v.goodsName}}</div>
					<div class="f24 mb20">{{v.brandname}}</div>
					<div class="f24 mb20">{{v.validTime}} 到期</div>
				</div>
			</div>
			<u-divider></u-divider>
			<div class="flex-end">
				<div class="bth-red" @click="showDetail(v)">查看券码</div>
			</div>
		</div>

		<u-empty v-if="list.length==0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
		</u-empty>
		<u-popup :show="show" mode="center" :round="10" @close="close" @open="open">
			<view class="detail-main">
				<div class="fbold f30 center mb40">
					<div class="flex1">电子券详情</div>
					<u-icon name="close" size="24" @click="close"></u-icon>
				</div>
				<div class="center mb50">
					<l-qrcode :value="detail.code" />
				</div>

				<u-cell-group>
					<u-cell v-if="detail.type!='url'" icon="email-fill" title="卡号"
						:value="detail.code || '--'"></u-cell>
					<u-cell v-if="detail.type!='url'" icon="lock-fill" title="卡密"
						:value="detail.codePwd || '--'"></u-cell>
					<u-cell v-if="detail.type=='url'" icon="attach" title="使用链接" :value="detail.url || '--'"></u-cell>
				</u-cell-group>

			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	let {
		proxy
	} = getCurrentInstance();

	// 卷详情
	const show = ref(false)
	const detail = ref({})
	const showDetail = (v) => {
		detail.value = v
		show.value = true
	}
	const close = () => {
		show.value = false
	}

	const list = ref([])
	const pageNum = ref(1)
	const pageSize = ref(10)
	const getcoupons = () => {
		proxy.$http('/api/dzq/coupons', {
			phone: uni.getStorageSync('uInfo').phone,
			pageNum: pageNum.value,
			pageSize: pageSize.value
		}).then((r) => {
			console.log(r)
			list.value = r.data
		})
	}
	onLoad((e) => {
		getcoupons()
	})
</script>

<style lang="scss" scoped>
	.detail-main {
		padding: 30rpx;
		width:80vw;
	}

	.bth-red {
		width: 140rpx;
	}

	.open-icon {
		width: 160rpx;
		height: 140rpx;
		top: 10rpx;
		right: 0;
	}

	.box1 {
		width: 705rpx;
		padding: 25rpx 20rpx;
		margin: 0 auto 35rpx;
		border-radius: 13rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx #F1F2F3;

		.player-icon {
			width: 196rpx;
			height: 196rpx;
			border: 1rpx solid #A1A1A1;
			border-radius: 13rpx;
		}

		.text1 {
			margin-bottom: 28rpx;
		}
	}
</style>